[Notion]NotionとVimを併用したブログ執筆スタイルについてかいてみた

DevIO記事の執筆にてNotionとVimの両方を行き来しています。それぞれでやっている内容は大体以下のような感じです。

• Notion
  • 画像交えた下書き
  • ネタ出し
  • データベースでの草書管理
• Vim
  • 入力補完
  • table用Markdown出力補完
  • markdown記法での修正
  • ブラウザプレビュー

Vimのみで編集した場合に比べると、Notionでの編集はテキストを色々な環境から読めることや画像を途中に挟む場合のプレビューがお手軽です。一番のネックは互いにテキストを持ち運びするのがとても大変なところです。Vim to Notion(筆者の場合はNeovim)の場合はオプション指定コピペで行けますが、Notion to Vimは中々手強いものです。

今回はNotionとVimを併用してのブログ執筆スタイルについて書いてみました。

NotionとVimでの行き来

残念ながら、ワンコマンドにてサッと行けるような状況にはなっていません。現状は以下の構成にて行っています。

	HowTo
Notion to Vim	notion2md + notion-cli-list-manager
Vim to Notion	clipboard

双方の行き来で注意すべき点は常にお互いを上書きしている状況であること。それさえ分かっていれば差分の扱いは無視できるとも言えます。

Vim to Notion

筆者はNeovimを利用しているため、init.vimに以下の一行を書き入れています。

set clipboard+=unnamedplus

ビジュアルモードで選択したあとyyにてクリップします。あとはNotionに貼り付けるだけです。

TerminalからNotionへの転送を公式API経由で再現しようとする場合、行毎に適切なブロック指定を踏まえたJSONオブジェクト生成が必要になってくるためブラウザ上からの貼り付けのほうが断然スムーズです。

Notion to Vim

notion2mdとnotion-cli-list-managerの組み合わせによる実際の手順は以下の通りです。

1. データベースに関数カラムでnotion2mdを利用したコマンドラインを生成しておく
2. notion-cli-list-managerでデータベースのカラムをダンプし、出力したいレコードの関数カラムテキストをコピーする
3. コピーしたコマンドラインを貼り付けて実行する
4. 生成された内容をプレビュー介しつつ修正する

notion2mdを利用したコマンドラインについては、以下の内容を関数と設定することで再現できます。

"notion2md --unzipped -u https://notion.so/YOUR_ID/" + id()

notion-cli-list-managerはトークンを渡す手続きが必要となってくるので、一連の手続きがまとまったバッチファイルを生成しておきます。

#!/bin/sh
list set --token ${NOTION_TOKEN} --id XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
list

$ ./dumptable
+-----+------+------+
|  0  |  1   |  2   |
+-----+------+------+
| URL | タグ | 名前 |
+-----+------+------+
Insert the ordered list of indexes of the properties you want to display.
Eg: "2,3,0". Default: [0:3]:
+-------+-------------------------------------------------------------------------------------+------+-----------+
| Index | URL                                                                                 | タグ | 名前      |
+-------+-------------------------------------------------------------------------------------+------+-----------+
| 0     | notion2md --unzipped -u https://notion.so/xxxxxxxx/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx |      | Colima    |
| 1     | notion2md --unzipped -u https://notion.so/xxxxxxxx/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx |      |           |
| 2     | notion2md --unzipped -u https://notion.so/xxxxxxxx/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx |      | notion2md |
+-------+-------------------------------------------------------------------------------------+------+-----------+

注意

今回のやり方はnotion2mdの変換対象以外は正常に出力されない可能性があります。特に気をつけるべきはembedでしょう。これはNotionが出力したiframeを経由するため、Notion側独自実装となっている内容が多いと予想できます。

あとがき

人によっては「明らかに手間だろう」という感想になることが予想できる、変わり種のやり方となります。

DevIOへアップする原稿を作成するための手順としており、Notionそのものをブログとして取り扱う場合はほぼ不要ともいえます。ただ、notion2mdについては一部ブロックを除いてバックアップとしても使えるため、定期的な実行を仕込んでおくと便利かもしれません。